<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('course_rl_10')"></navbar>
        <div class="content-noBottom">
            <WeekDatePicker :time="currentDateStr" format="yyyy-MM-dd" @change="changeDay" :tag-list="tagList" @changeDate="changeDay"></WeekDatePicker>
            <!-- <div class="course-types">
                <span><van-button plain :type="currentCourseType === 'ALL' ? 'info' : 'default'" size="mini" @click="() => {currentCourseType = 'ALL';viewListHandle()}">{{ $t('course_rl_1') }}</van-button></span>
                <span><van-button plain :type="currentCourseType === 'SELFSTUDY' ? 'info' : 'default'" size="mini" @click="() => {currentCourseType = 'SELFSTUDY';viewListHandle()}">{{ $t('course_rl_13') }}</van-button></span>
                <span><van-button plain :type="currentCourseType === 'CLASSROOM' ? 'info' : 'default'" size="mini" @click="() => {currentCourseType = 'CLASSROOM';viewListHandle()}">{{ $t('course_rl_14') }}</van-button></span>
                <span><van-button plain :type="currentCourseType === 'INTEGRATED' ? 'info' : 'default'" size="mini" @click="() => {currentCourseType = 'INTEGRATED';viewListHandle()}">{{ $t('course_rl_4') }}</van-button></span>
            </div> -->
            <div class="course-count">{{ $t('course_rl_11', {'value': viewList.length}) }}</div>
            <van-list
            :finished-text="(!isLoading && viewList.length > 0) ? $t('no_more') : ''"
            loding-text="loading"
            >
                <div class="course-body">
                    <div class="course-list">
                        <div class="course-item" v-for="item in viewList" :key="item.itmId" @click="toDetail(item)">
                            <div class="course-img">
                                <van-image width="100%" height="100%" :src="appUrl + item.itmIcon"/>
                            </div>
                            <div class="course-detail">
                                <div class="course-title">
                                    <van-icon name="desktop-o" v-if="item.itmType === 'SELFSTUDY'"/>
                                    <van-icon name="notes-o" v-else-if="item.itmType === 'CLASSROOM'"/>
                                    <van-icon name="paid" v-else-if="item.itmType === 'INTEGRATED'"/>
                                    <span style="width: 100%">{{ item.itmTitle }}</span>
                                </div>
                                <div class="course-date"> {{ $t('course_rl_5', {'value1': item.itmEffStartDatetime,'value2': item.itmEffEndDatetime}) }} </div>
                                <div class="course-info">
                                    <span v-if="item.itmType === 'SELFSTUDY' && item.itmExamInd === 0 ">{{ $t('course_rl_2') }}</span>
                                    <span v-else-if="item.itmType === 'SELFSTUDY' && item.itmExamInd === 1 ">{{ $t('exam_type_selfstudy') }}</span>
                                    <span v-else-if="item.itmType === 'CLASSROOM' && item.itmExamInd === 0 ">{{ $t('course_rl_3') }}</span>
                                    <span v-else-if="item.itmType === 'CLASSROOM' && item.itmExamInd === 1 ">{{ $t('exam_type_classroom') }}</span>
                                    <span v-else>{{ $t('course_rl_4') }}</span>
                                    <span>
                                        <van-icon name="friends-o" />
                                        <span>{{ item.appCount }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="!isLoading && viewList.length === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t("no_data") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import DatePicker from '../common/DatePicker';
import { Button, Image, Icon, Toast } from 'vant';
export default {
    name: 'LearningCalendar',
    components: {
        WeekDatePicker: DatePicker,
        vanButton: Button,
        vanImage: Image,
        vanIcon: Icon,
        vanToast: Toast
    },
    data() {
        return {
            list: [],
            isLoading: false,
            total: 0,
            currentCourseType: 'ALL',
            currentDate: new Date(),
            currentDateStr: this.formatDate(new Date()),
            currentStartDay: '',
            currentEndDay: '',
            currentMonth: -1,
            courseData: {},
            courseList: [],
            viewList: [],
            tagList: [],
            tempDateStr: this.formatDate(new Date())
        };
    },
    methods: {
        toDetail(data) {
            if (data.isMobile && data.isMobile === 1) {
                if (data.itmType === 'CLASSROOM' && data.itmExamInd === 0) {
                    this.$router.push({path: `/certifiedCourse/${data.itmId}/0`});
                } else {
                    this.$router.push({path: `/course/${data.itmId}/0`});
                }
            } else {
                Toast({message: this.$t('course_rl_12'), forbidClick: true});
            }
        },
        changeDay(day, isSelect) {
            this.currentDate = new Date(day);
            this.tempDateStr = this.formatDate(this.currentDate);
            const nowMonth = this.currentDate.getMonth();
            if (Number(nowMonth) + 1 !== this.currentMonth) {
                this.dataHandle(nowMonth, isSelect);
            } else {
                this.dataHandle(nowMonth, isSelect);
                if (this.courseList.length > 0) {
                    const index = this.courseList.findIndex(item => item.time === day);
                    if (index > -1) {
                        this.courseData = this.courseList[index];
                        this.viewListHandle();
                    }
                }
            }
        },
        viewListHandle() {
            if (this.currentCourseType === 'ALL') {
                this.viewList = this.courseData.allList;
            } else if (this.currentCourseType === 'SELFSTUDY') {
                this.viewList = this.courseData.selfstudyList;
            } else if (this.currentCourseType === 'CLASSROOM') {
                this.viewList = this.courseData.classroomList;
            } else {
                this.viewList = this.courseData.integratedList;
            }
        },
        formatDate(date) {
            const d = new Date(date);
            let month = '' + (d.getMonth() + 1);
            let day = '' + d.getDate();
            const year = d.getFullYear();
            if (month.length < 2) {
                month = '0' + month;
            }
            if (day.length < 2) {
                day = '0' + day;
            }
            return [year, month, day].join('-');
        },
        dataHandle(nowMonth, isSelect) {
            const nowYear = this.currentDate.getFullYear();
            const monthStartDate = new Date(nowYear, nowMonth, 1);
            const monthEndDate = new Date(nowYear, nowMonth + 1, 0);
            this.currentStartDay = this.formatDate(monthStartDate);
            this.currentEndDay = this.formatDate(monthEndDate);
            this.findLearningCalendar(isSelect);
            this.currentMonth = Number(nowMonth) + 1;
            // this.showCourse(this.formatDate(this.currentDate));
        },
        findLearningCalendar(isSelect) {
            this.isLoading = true;
            let data = {
                itmContentEffStartDatetime: this.currentStartDay,
                itmContentEffEndDatetime: this.currentEndDay,
                isMobileInd: true
            };
            this.$axios.post('/app/api/trainee/course/LearningSchedule/list', data).then(res => {
                if (res.data && res.data.length > 0) {
                    this.courseList = res.data;
                    this.courseList.forEach(item => {
                        if (item.allCount) {
                            this.tagList.push(item.time);
                        }
                    });
                    if (isSelect) {
                        const index = this.courseList.findIndex(item => item.time === this.tempDateStr);
                        if (index > -1) {
                            this.courseData = this.courseList[index];
                            this.viewListHandle();
                        }
                    }
                }
                this.isLoading = false;
            });
        }
    }
};
</script>

<style scoped lang="less">
    .course-types {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        &>span{
            margin-right: 5px;
        }
    }
    .course-count {
        padding: 10px 15px 10px;
    }
    .course-body {
        height: calc(100% - 172px);
        overflow-y: auto;
        .course-list {
            /*height: 100%;*/
            /*overflow-y: auto;*/
            padding: 0 15px;
            .course-item {
                height: 80px;
                display: flex;
                align-items: center;
                background: #fff;
                margin-bottom: 10px;
                border-radius: 5px;
                .course-img {
                    width: 120px;
                    height: 80px;
                    /deep/.van-image__img, /deep/.van-image__error {
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                    }
                }
                .course-detail {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex-grow: 1;
                    margin: 0 10px;
                    height: 80px;
                    &>div:not(:first-child) {
                        font-size: 10px;
                        color: #999;
                    }
                    &>div:first-child {
                        margin-top: 10px;
                    }
                    &>div:last-child {
                        margin-bottom: 10px;
                    }
                    .course-title {
                        display: flex;
                        align-items: center;
                        &>span {
                            margin-left: 2px;
                        }
                    }
                    .course-info {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        &>span:last-child {
                            display: flex;
                            align-items: center;
                            &>span {
                                margin-left: 2px;
                            }
                        }
                    }
                }
            }
        }
    }
    /deep/.van-button--plain.van-button--info{
      color: #075ebb;
      border: 1px solid #075ebb;
    }
</style>
